<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="webroot" value="${pageContext.request.contextPath}" />
<html>
<head>
	<meta charset="utf-8">
	<title>角色列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="${webroot}/static/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="${webroot}/static/css/public.css" media="all" />
</head>
<body class="childrenBody">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal addRole_btn">添加角色</a>
			</div>
		</form>
	</blockquote>
	<table id="newsList" lay-filter="newsList"></table>
	<!--审核状态-->
	<script type="text/html" id="newsStatus">
		{{#  if(d.newsStatus == "1"){ }}
		<span class="layui-red">等待审核</span>
		{{#  } else if(d.newsStatus == "0"){ }}
		<span class="layui-blue">已存草稿</span>
		{{#  } else { }}
			审核通过
		{{#  }}}
	</script>

	<!--操作-->
	<script type="text/html" id="newsListBar">
        <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="look">权限设置</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
	</script>
</form>
<script type="text/javascript" src="${webroot}/static/layui/layui.js"></script>
<script src="${webroot}/static/js/jquery.min.js" charset="utf-8"></script>
<script>
layui.use(
		[ 'form', 'layer', 'laydate', 'table', 'laytpl' ],
		function() {
			var form = layui.form, layer = parent.layer === undefined ? layui.layer
					: top.layer, $ = layui.jquery, laydate = layui.laydate, laytpl = layui.laytpl, table = layui.table;

			// 新闻列表
			var tableIns = table
					.render({
						elem : '#newsList',
						url : '/admin/role/querypage',
						cellMinWidth : 95,
						page : true,
						height : "full-125",
						limit : 15,
						limits : [ 10, 15, 20, 25 ,30 , 50, 80, 100],
						id : "newsListTable",
						cols : [ [
								{
									field : 'roleName',
									title : '职位名称',
									align : "center"
								},
								{
									field : 'roleDepict',
									title : '职能描述',
									align : "center"
								},
								{
									field : 'createTime',
									title : '添加时间',
									sort : false,
									fixed : false,
									align : "center",
									templet : function(d){return layui.laytpl.toDateString(d.createTime,'yyyy-MM-dd HH:mm:ss'); }
								},
								{
									field : 'status',
									title : '是否启用',
									align : 'center',
									templet : function(d) {
										var str = '';
										if (d.status == 0) {
											str = '<input type="checkbox" checked="" id='+ d.roleId +' name='+ d.roleName +' lay-filter="status" lay-skin="switch" lay-text="是|否" '
												+ d.status + '>';
										}else if(d.status == 1){
											str = '<input type="checkbox" id='+ d.roleId +' name='+ d.roleName +' lay-filter="status" lay-skin="switch" lay-text="是|否" '
												+ d.status + '>';
						                }
										return str;
									}
								}, {
									title : '操作',
									templet : '#newsListBar',
									fixed : "right",
									align : "center"
								} ] ]
					});

			// 是否置顶
			form.on('switch(status)', function(data) {
				var index = layer.msg('修改中，请稍候', {
					icon : 16,
					time : false,
					shade : 0.8,
				});
				var status=''; var record ="";
				if (data.elem.checked) {
					status = 0;
					record ="角色启用:";
				} else {
					status = 1;
					record ="角色禁用:";
				}
				$.get("/admin/role/update", {
					roleId : data.elem.id,
					roleName : data.elem.name,
					status : status,
					record : record
				}, function(data) {
					var res = JSON.parse(data);
					if (res.success) {
						layer.msg("操作成功！");
						tableIns.reload();
					} else {
						top.layer.msg(res.message);
					}
				})
			})

			// 搜索【此功能需要后台配合，所以暂时没有动态效果演示】
			$(".search_btn").on("click", function() {
				if ($(".searchVal").val() != '') {
					table.reload("newsListTable", {
						page : {
							curr : 1
						// 重新从第 1 页开始
						},
						where : {
							key : $(".searchVal").val()
						// 搜索的关键字
						}
					})
				} else {
					layer.msg("请输入搜索的内容");
				}
			});

			// 添加角色
			function addRole(edit) {
				var title ="";
				if(edit){
					title="编辑角色";
				}else{
					title="添加角色";
				}
			    var index = layer.open({
		            title : title,
		            type : 2,
		            area : ["500px","355px"],
		            content : "/admin/role/detail",
		            success : function(layero, index){
		                var body = $($(".layui-layer-iframe",parent.document).find("iframe")[0].contentWindow.document.body);
		                if(edit){
		                    body.find(".roleName").val(edit.roleName);
		                    body.find(".roleDepict").val(edit.roleDepict);
		                    body.find("#roleId").val(edit.roleId);
		                    form.render();
		                }
		            },
		            end:function(){
		            	//tableIns.reload();
		            }
		        })
			}
			$(".addRole_btn").click(function() {
				addRole();
			})


			// 列表操作
			table.on('tool(newsList)', function(obj) {
				var layEvent = obj.event, data = obj.data;
				if (layEvent === 'edit') { // 编辑
					addRole(data);
				} else if (layEvent === 'del') { // 删除
					layer.confirm('确定删除此角色？', {
						icon : 3,
						title : '提示信息'
					}, function(index) {
						$.get("/admin/role/delete", {
							roleId : data.roleId,
							roleName : data.roleName,
							record : "删除角色"
						// 将需要删除的newsId作为参数传入
						}, function(data) {
							var res = JSON.parse(data);
							if (res.success) {
								//tableIns.reload();
								layer.close(index);
							} else {
								top.layer.msg(res.message);
							}
						})
					});
				} else if (layEvent === 'look') { // 预览
					roleAuthor(data.roleId);
				}
			});
			
			function roleAuthor(roleId){
				window.location.href="/admin/role/showsuthority?roleId="+roleId;
			}

			// 时间戳的处理
			layui.laytpl.toDateString = function(d, format) {
				var date = new Date(d || new Date()), ymd = [
						this.digit(date.getFullYear(), 4),
						this.digit(date.getMonth() + 1),
						this.digit(date.getDate()) ], hms = [
						this.digit(date.getHours()),
						this.digit(date.getMinutes()),
						this.digit(date.getSeconds()) ];

				return format.replace(/yyyy/g, ymd[0]).replace(/MM/g,
						ymd[1]).replace(/dd/g, ymd[2]).replace(/HH/g,
						hms[0]).replace(/mm/g, hms[1]).replace(/ss/g,
						hms[2]);
			};
			// 数字前置补零
			layui.laytpl.digit = function(num, length, end) {
				var str = '';
				num = String(num);
				length = length || 2;
				for (var i = num.length; i < length; i++) {
					str += '0';
				}
				return num < Math.pow(10, length) ? str + (num | 0)
						: num;
			};

})
</script>
</body>
</html>